<template>
  <div class="order-header">
    <div class="state">
      <i class="iconfont" :class="[status.icon]"></i>
      <p>{{status.label}}</p>
    </div>
    <div class="info">
      <p>订单编号：{{order.id}}</p>
      <p>下单时间：{{order.createTime}}</p>
      <p v-if="downTime">付款截止：{{downTime}}</p>
    </div>
    <div class="operation">
      <!-- 待付款 -->
      <a v-if="order.orderState===1" class="btn primary" href="javascript:;">立即付款</a>
      <a v-if="order.orderState===1" @click="cancelOrder"  class="btn cancel" href="javascript:;">取消订单</a>
      <!-- 待发货 -->
      <a v-if="order.orderState===2" class="btn primary" href="javascript:;">再次购买</a>
      <!-- 待收货 -->
      <a v-if="order.orderState===3" @click="confirmReceipt" class="btn primary" href="javascript:;">确认收货</a>
      <a v-if="order.orderState===3" class="btn plain" href="javascript:;">再次购买</a>
      <!-- 待评价 -->
      <a v-if="order.orderState===4" class="btn primary" href="javascript:;">评价商品</a>
      <a v-if="order.orderState===4" class="btn plain" href="javascript:;">申请售后</a>
      <a v-if="order.orderState===4" class="btn plain" href="javascript:;">再次购买</a>
      <!-- 已完成 -->
      <a v-if="order.orderState===5" class="btn primary" href="javascript:;">再次购买</a>
      <a v-if="order.orderState===5" class="btn plain" href="javascript:;">申请售后</a>
      <a v-if="order.orderState===5" class="btn plain" href="javascript:;">查看评价</a>
    </div>
    <!-- 取消订单 -->
    <order-cancel ref="orderCancel" :order="order"></order-cancel>
  </div>
</template>

<script>
import OrderCancel from './order-cancel'
import { confirmReceipt, downTimeLogic } from '../mixins'
export default {
  mixins: [confirmReceipt, downTimeLogic],
  name: 'order-header',
  components: { OrderCancel },
  props: {
    order: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    status () {
      const { orderState } = this.order
      let status = {}
      switch (orderState) {
        case 1:
          status = { label: '等待付款', icon: 'icon-order-unpay' }
          break
        case 2:
          status = { label: '等待发货', icon: 'icon-order-deliver' }
          break
        case 3:
          status = { label: '等待收货', icon: 'icon-order-receive' }
          break
        case 4:
          status = { label: '等待评价', icon: 'icon-order-comment' }
          break
        case 5:
          status = { label: '交易完成', icon: 'icon-order-complete' }
          break
        case 6:
          status = { label: '交易关闭', icon: 'icon-order-cancel' }
          break
        default:
          break
      }
      return status
    }
  },
  methods: {
    cancelOrder () {
      this.$refs.orderCancel.openDialog()
    }
  }
}
</script>

<style scoped lang='less'>
.order-header {
  height: 192px;
  width: 100%;
  display: flex;
  align-items: center;
  .state {
    width: 220px;
    text-align: center;
    .iconfont {
      font-size: 40px;
      color: @xtxColor;
    }
    p {
      font-size: 16px;
      color: #666;
    }
  }
  .info {
    width: 240px;
    line-height: 30px;
    p {
      color: #999;
    }
  }
  .operation {
    flex: 1;
    text-align: right;
    padding-right: 100px;
    .btn {
      display: inline-block;
      width: 100px;
      height: 32px;
      text-align: center;
      line-height: 30px;
      border: 1px solid transparent;
      color: #fff;
      border-radius: 4px;
      margin-left: 20px;
      &.primary {
        background-color: @xtxColor;
        border-color: @xtxColor;
      }
      &.cancel {
        background-color: #ccc;
        border-color: #ccc;
      }
      &.plain {
        background-color: #e3f9f4;
        border-color: @xtxColor;
        color: @xtxColor;
      }
    }
  }
}
</style>
